<app-nav> </app-nav>
<app-spinner
  *ngIf="isRequesting"
  [delay]="300"
  [message]="'Please wait...'"
  [isRunning]="isRequesting"
></app-spinner>
<div class="container ">
  <div class="">
    <nav class="mt-4" aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <a [routerLink]="['/overview']">Overview</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">Transfer {{ ftName }}</li>
      </ol>
    </nav>
    <div class="box">
      <div class="box-header">
        <h3>Transfer {{ ftName }}</h3>
      </div>

      <div class="box-body">
        <div class="row form-group">
          <div class="col-sm-12">
            <label for="name mb-1">Enter amount</label>
            <input
              type="number"
              class="form-control text-box"
              autofocus
              [(ngModel)]="amount"
              (keydown)="$event.keyCode == 13 ? transferFToken() : null"
              (keypress)="utilService.validate($event)"
              placeholder="Please enter amount"
              required
            />
          </div>
        </div>

        <div class="row form-group">
          <div class="col-sm-12">
            <label for="publicKey">Select Receiver</label>
            <select
              class="form-control text-box"
              id="publicKey"
              name="sellist1"
              [(ngModel)]="receiverName"
              required
            >
              <option [ngValue]="undefined" selected>Select </option>
              <option *ngFor="let user of users" value="{{ user }}">{{ user }}</option>
            </select>
          </div>
        </div>

        <div class="row form-group">
          <div class="col-md-6">
            <button
              type="submit"
              class="btn btn-md btn-primary"
              [disabled]="!amount || !receiverName"
              (click)="transferFToken()"
            >
              Transfer {{ ftName }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
